<template>
  <el-dialog :title="title" :visible.sync="openDetail" width="800px" append-to-body>
    <el-row>

      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span>{{ host.name }}主机信息</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <tbody>
                <tr>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">IP</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">{{ host.ip }}</div>
                  </td>

                  <td class="el-table__cell is-leaf">
                    <div class="cell">主机名</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">{{ host.hostname }}</div>
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">CPU</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">{{ host.cpu }}</div>
                  </td>

                  <td class="el-table__cell is-leaf">
                    <div class="cell">使用率</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" :class="{'text-danger': host.cpuRate > 80}">{{ host.cpuRate }}%</div>
                  </td>
                </tr>

                <tr>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">总内存</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">{{ Math.round(host.mem/1024) }}G</div>
                  </td>

                  <td class="el-table__cell is-leaf">
                    <div class="cell">使用率</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" :class="{'text-danger':  host.memRate > 80}">{{ host.memRate }}%</div>
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">操作系统</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">{{ host.os }}</div>
                  </td>

                  <td class="el-table__cell is-leaf">
                    <div class="cell">系统架构</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">{{ host.arch }}</div>
                  </td>
                </tr>
                <tr>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">风扇</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">{{ host.fan }}</div>
                  </td>

                  <td class="el-table__cell is-leaf">
                    <div class="cell">温度</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">{{ host.temperature }}</div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span>磁盘</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
                <tr>
                  <th class="el-table__cell el-table__cell is-leaf">
                    <div class="cell">名称</div>
                  </th>
                  <th class="el-table__cell is-leaf">
                    <div class="cell">总大小</div>
                  </th>
                  <th class="el-table__cell is-leaf">
                    <div class="cell">可用大小</div>
                  </th>
                  <th class="el-table__cell is-leaf">
                    <div class="cell">已用大小</div>
                  </th>
                  <th class="el-table__cell is-leaf">
                    <div class="cell">已用百分比</div>
                  </th>
                </tr>
              </thead>
              <tbody v-if="host.discs">
                <tr v-for="(disc, index) in host.discs" :key="index">
                  <td class="el-table__cell is-leaf">
                    <div class="cell">{{ disc.name }}</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">{{ disc.size }}G</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">{{ disc.avail }}G</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">{{ disc.used }}G</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell" :class="{'text-danger': disc.useRate > 80}">{{ disc.useRate }}%</div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span>网络</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <thead>
                <tr>
                  <th class="el-table__cell el-table__cell is-leaf">
                    <div class="cell">名称</div>
                  </th>
                  <th class="el-table__cell is-leaf">
                    <div class="cell">MAC地址</div>
                  </th>
                  <th class="el-table__cell is-leaf">
                    <div class="cell">IP地址</div>
                  </th>
                  <th class="el-table__cell is-leaf">
                    <div class="cell">上行速率</div>
                  </th>
                  <th class="el-table__cell is-leaf">
                    <div class="cell">下行速率</div>
                  </th>
                </tr>
              </thead>
              <tbody v-if="host.nets">
                <tr v-for="(net, index) in host.nets" :key="index">
                  <td class="el-table__cell is-leaf">
                    <div class="cell">{{ net.name }}</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">{{ net.macaddr }}</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">{{ net.ip4addr }}</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">{{  Math.round(net.txbyt/128) }}kbps</div>
                  </td>
                  <td class="el-table__cell is-leaf">
                    <div class="cell">{{  Math.round(net.rxbyt/128) }}kbps</div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
          <el-button @click="close">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    getHostDetail
  } from "@/api/devops/host";

  export default {
    name: "HostDetail",
    data() {
      return {
        // 服务器信息
        host: [],
        openDetail: false,
        title:''
      };
    },
    created() {

    },
    methods: {
      // 打开加载层
      close() {
        this.openDetail = false;
      }
    }
  };
</script>
